import React, { Component } from 'react';
import {nanoid} from 'nanoid'
import { connect } from 'react-redux';
import {personAdd} from '../../redux/actions/person'
class Person extends Component {
  addPerson=()=>{
    const name = this.nameNode.value
    const age = this.ageNode.value
    const personObj = {id:nanoid(), name,age}
    console.log(personObj)
    this.props.add(personObj)
    this.nameNode.value=''
    this.ageNode.value=''
  }
  render() {
    return (
      <div>
        <p>上方组件求和为{this.props.totalnum}</p>
        <h2>person组件</h2>
        <input type="text" ref={(c=>this.nameNode = c)} placeholder="输入名字" />
        <input type="text" ref={(c=>this.ageNode = c)} placeholder="输入年龄" />
        <button onClick={this.addPerson}>添加</button>
       <ul>
        {this.props.list.map(ele=>{
          return <li key={ele.id} > {ele.name}-{ele.age}</li>
        })}
       
       </ul>
      </div>
    );
  }
}

export default  connect(
  state=>({list:state.rens,totalnum:state.he}),
  {
    add:personAdd
  }
)(Person)